<template>
  <view class="main">
    <text>默认样式</text>
    <eui-echarts-pie :chartList="pieList"></eui-echarts-pie>

    <text>传入样式</text>
    <eui-echarts-pie :chartList="pieList" :chartStyle="chartStyle" :seriesLeft="seriesLeft" :legendRight="legendRight"></eui-echarts-pie>
  </view>
</template>

<script>
export default {
  name: "index",
  data() {
    return{
      // 饼图数据
      pieList: [
        { value: 25, name: '大卖场' },
        { value: 30, name: '购物中心' },
        { value: 30, name: '便利店' },
        { value: 10, name: '标超' },
        { value: 5, name: '加盟店' }
      ],
      // 饼图外层容器样式
      chartStyle: 'width: 710rpx; height: 450rpx; background: #FFFFFF',
      // 组件离容器左侧的距离
      seriesLeft: '-200rpx',
      // 图例组件离容器右侧的距离: 可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。
      legendRight: '10%',
    }
  },
  methods: {}
}
</script>

<style scoped>
.main {
  background-color: #F4F4F4;
  display: flex;
  padding: 0;
  width: 100%;
  height: 3000rpx;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

</style>
